import { createElement, Component } from 'rax';
import Touchable from 'rax-touchable';

const scrollBarStyles = {
    leftWrap: {
      position: 'fixed',
      left: 0,
      top: 0,
      bottom: 0,
      width: 190,
      // backgroundColor: '#ffffff',
    },
  
    leftNavItem: {
      borderBottomWidth: 4,
      borderBottomColor: '#fafafa',
      justifyContent: 'center',
      alignItems: 'center',
    },
  
    bar: {
      position: 'absolute',
      top: 0,
      left: 0,
    }
};

 export default class ScrollBar extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
  
      };
    }
  
    onClickTitle(index) {
      const { onClickTitle = () => {} } = this.props;
      onClickTitle(index);
    }
  
    render() {
      const {
        classList,
        selected,
        mds,
        scrollBarWidth,
        barItemHeight,
        defaultBg,
        selectBg,
        defaultColor,
        selectColor,
        leftBgColor,
        barBgColor,
        barWidth,
      } = this.props;
  
      let scrollViewProps = {
        'data-role': mds.moduleName,
        'data-spmc': `${mds.moduleName}_${mds.widgetId}`,
        style: {
          ...scrollBarStyles.leftWrap,
          width: scrollBarWidth,
          backgroundColor: leftBgColor,
        },
        showsVerticalScrollIndicator: true,
        showsHorizontalScrollIndicator: false,
        onEndReachedThreshold: 300,
        onEndReached: () => {},
        ref: 'scrollView',
      };
      return (
        <ScrollView {...scrollViewProps}>
          {
            classList.map((item, index) => {
              // const spmdId = `title${index + 1}`;
              const spmd = `${mds.moduleName}_${mds.widgetId}_title${index + 1}`;
              const isSelected = selected === index;
              const props = {
                style: {
                  ...scrollBarStyles.leftNavItem,
                  width: scrollBarWidth,
                  height: barItemHeight,
                  backgroundColor: isSelected ? selectBg : defaultBg,
                },
                'data-spmd': spmd,
                onPress: this.onClickTitle.bind(this, index)
              };
              return (
                <Touchable {...props}>
                  <Text style={{
                    width: scrollBarWidth,
                    height: barItemHeight,
                    lineHeight: barItemHeight,
                    textAlign: 'center',
                    color: isSelected ? selectColor : defaultColor,
                  }}>
                    {item.title}
                  </Text>
                  {
                    isSelected && <View style={{
                      ...scrollBarStyles.bar,
                      height: barItemHeight,
                      width: barWidth,
                      backgroundColor: barBgColor,
                    }}/>
                  }
                </Touchable>
              );
            })
          }
        </ScrollView>
      );
    }
  }
  
  